/* 将页面调节为90%   */
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="site1.css" />
  </head>
  <body>
    <header>
      <div class="header-inner">
        <img src="imgs/qqmusic.png" />
      </div>
    </header>
    <main>
      <div class="container container1">
        <div class="title-contain">
          <div class="title">歌单推荐</div>
        </div>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">为你推荐</a>
          <a href="#" class="tag-item">运动</a>
          <a href="#" class="tag-item">网络歌曲</a>
          <a href="#" class="tag-item">思念</a>
          <a href="#" class="tag-item">官方歌曲</a>
          <a href="#" class="tag-item">情歌</a>
        </div>
        <div class="play-list">
          <div class="album">
            <a href="#" class="cover-wrap"
              ><!--图片-->
              <img
                src="https://music-file.y.qq.com/songlist/user/ow6sown5NecFov/68da26ee/FvtN1uG5IU_Ngih7_t4qwz_5f030.jpg?imageView2/4/w/300/h/300"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title"
                >疗愈特供-专属抖人的治愈热单</a
              >
            </div>
            <div class="nowrap album-infor">播放量：79.9万</div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap"
              ><!--图片-->
              <img
                src="https://music-file.y.qq.com/songlist/user/ow6sown5NecFov/68da231c/7XpgNaxDu2U_pX1cC5Q0En_72466.jpg?imageView2/4/w/300/h/300"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title"
                >抖音出圈热歌，让你一秒回魂！</a
              >
            </div>
            <div class="nowrap album-infor">播放量：70.7万</div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap"
              ><!--图片-->
              <img
                src="https://music-file.y.qq.com/songlist/u/oiEA7K457Kcz7n/1217d/b7cf592276ea2dfdb731e247a074dbc47463483a_12ff76.jpg?imageView2/4/w/300/h/300"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title"
                >抖音最火的歌2025（持续更新）</a
              >
            </div>
            <div class="nowrap album-infor">播放量：1845.7万</div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap"
              ><!--图片-->
              <img
                src="https://qpic.y.qq.com/music_cover/3sZgibm04hICGbleGFmh9SbcOPavRib0gnf0Qsb0R4CbEN4qbrq6ZV5g/300?n=1"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title"
                >抖音超热曲：左耳陪伴，右耳寻欢</a
              >
            </div>
            <div class="nowrap album-infor">播放量：1.1亿</div>
          </div>
          <div class="album">
            <a href="#" class="cover-wrap"
              ><!--图片-->
              <img
                src="https://qpic.y.qq.com/music_cover/thfLhcllFYp1PPRzdD0S1PLhEvs7rbHTvlykBFbjpoHJ806rtYWAhg/300?n=1"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </a>
            <div>
              <a href="#" class="nowrap album-title"
                >不出意外的话，我们不会再见面了</a
              >
            </div>
            <div class="nowrap album-infor">播放量：2.3亿</div>
          </div>
        </div>
      </div>
      <div class="container container2">
        <div class="title-contain">
          <div class="title">新歌首发</div>
        </div>
        <div class="tag-list">
          <div class="button-">
          <img src="imgs/icon_play.png">
          &nbsp;播放全部
          </div>
          <a href="#" class="tag-item tag-active">最新</a>
          <a href="#" class="tag-item">内地</a>
          <a href="#" class="tag-item">港台</a>
          <a href="#" class="tag-item">欧美</a>
          <a href="#" class="tag-item">韩国</a>
          <a href="#" class="tag-item">日本</a>
        </div>
        <div class="play-list">
         <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M000002YhX3P4dA1y5_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >《一笑随歌》电视剧无畏破局片尾曲</a
              >
              <div class="nowrap album-infor">黄子弘凡</div>
            </div>
            <div class="nowrap album-time">
              04:01
            </div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M0000009WXgh3SOQYy_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >载梦行舟</a
              >
              <div class="nowrap album-infor">胡夏</div>
            </div>
            <div class="nowrap album-time">
              03:32
            </div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M000002D36Uj1Ze1zw_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >Mine or Yours (Yaeji Remix)</a
              >
              <div class="nowrap album-infor">宇多田光 (宇多田ヒカル)</div>
            </div>
            <div class="nowrap album-time">
              04:15
            </div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M000004K2gA23LVlsY_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >《宴遇永安》电视剧阖家喜阙</a
              >
              <div class="nowrap album-infor">王影璐/李昀锐/昌隆/冯嘉怡/隋俊波/董思怡/韩陌</div>
            </div>
            <div class="nowrap album-time">
              02:43
            </div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M0000037plg60Zl0uB_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >《入青云》影视剧以爱为解曲</a
              >
              <div class="nowrap album-infor">刘宇宁</div>
            </div>
            <div class="nowrap album-time">
              03:47
            </div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M000002HAz0M3ZyZCO_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >Thankful</a
              >
              <div class="nowrap album-infor">Sizuk/やなぎなぎ (柳凪)</div>
            </div>
            <div class="nowrap album-time">
              03:49
            </div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M000004DvfER1wCwsQ_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >岁岁年年</a
              >
              <div class="nowrap album-infor">肖战</div>
            </div>
            <div class="nowrap album-time">
              04:26
            </div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M000001aYsJF1RWduA_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >有且</a
              >
              <div class="nowrap album-infor">杨丞琳</div>
            </div>
            <div class="nowrap album-time">
              03:57
            </div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <img
                src="https://y.qq.com/music/photo_new/T002R300x300M000004Gh1zt2uT3Nv_1.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div class="infor">
              <a href="#" class="nowrap album-title"
                >《芬芳喜事》网剧插曲</a
              >
              <div class="nowrap album-infor">锤娜丽莎</div>
            </div>
            <div class="nowrap album-time">
              04:19
            </div>
          </div>
        </div>
      </div>
      <div class="container container3">
        <div class="title-contain">
          <div class="title">M V</div>
        </div>
        <div class="tag-list">
          <a href="#" class="tag-item tag-active">精选</a>
          <a href="#" class="tag-item">内地</a>
          <a href="#" class="tag-item">港台</a>
          <a href="#" class="tag-item">欧美</a>
          <a href="#" class="tag-item">韩国</a>
          <a href="#" class="tag-item">日本</a>
        </div>
        <div class="play-list">
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M101000oMoiG0JLHxe.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >Fruit Fly</a
              >
            </div>
            <div class="nowrap album-author">窦靖童/The Black Skirts</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;1683</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M0000025RRL332JnSm.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >我的对</a
              >
            </div>
            <div class="nowrap album-author">周深</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;3.7万</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M000004fZl3g0M7ZdM.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >祝福的心</a
              >
            </div>
            <div class="nowrap album-author">易烊千玺</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;4894</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M101000IsjVL188XMU.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >全宇宙的引力</a
              >
            </div>
            <div class="nowrap album-author">王源</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;6701</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M0000023B0iE2lSrQu.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >PEACE & VIOLENCE</a
              >
            </div>
            <div class="nowrap album-author">Faouzia</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;6744</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M101001aeZMu425qH2.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >一念之间－在空中</a
              >
            </div>
            <div class="nowrap album-author">齐豫/吴青峰</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;1.7万</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M1010045ExKD3yipVA.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >小镇帅哥</a
              >
            </div>
            <div class="nowrap album-author">王一珩OneSD</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;1.7万</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M101001N1Ndc0k1Blh.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >对 是错的</a
              >
            </div>
            <div class="nowrap album-author">Ghost (王琳凯)</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;12.1万</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M101004GoUn624kFiK.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >素人</a
              >
            </div>
            <div class="nowrap album-author">李宇春</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;2.1万</div>
          </div>
          <div class="album">
            <div class="cover-wrap">
              <!--图片-->
              <img
                src="https://y.qq.com/music/photo_new/T015R640x360M1010042t4cl3KPtEg.jpg?max_age=2592000"
                class="cover-img"
              />
              <div class="cover-mask"></div>
              <img src="imgs/cover_play.png" class="cover-play" />
            </div>
            <div>
              <a href="#" class="nowrap album-title"
                >这世的名字</a
              >
            </div>
            <div class="nowrap album-author">张信哲</div>
            <div class="nowrap album-infor"><img src="imgs/icon_listen.png">&nbsp;4.0万</div>
          </div>
        </div>
      </div>
    </main>
     <footer></footer>
  </body>
</html>
